<!--
 * @Descripttion: 支付码
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-29 17:46:27
-->
<template>
    <div class="lb-app-sweepcode">
        <top-nav></top-nav>
        <div class="page-main">
          <lb-tips>如果不能生成支付码, 请关闭后台管理页面, 点击更新缓存后重新进入此页面</lb-tips>
          <div class="page-search-form">
            <el-form @submit.native.prevent
            :inline="true"
            :model="searchForm"
            ref="searchForm"
            >
              <el-form-item label="员工姓名" prop="keyword">
                <el-input placeholder="请输入员工姓名" v-model="searchForm.keyword"></el-input>
              </el-form-item>
              <el-form-item label="员工昵称" prop="nikeName">
                <el-input placeholder="请输入员工昵称" v-model="searchForm.nikeName"></el-input>
              </el-form-item>
              <el-form-item>
                <lb-button size="medium" type="primary" icon="el-icon-search" style="margin-right:5px" @click="getTableDataList(1)">{{$t('action.search')}}</lb-button>
                <lb-button size="medium" icon="el-icon-refresh-left" style="margin-right:5px" @click="resetForm('searchForm')">{{$t('action.reset')}}</lb-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table
            v-loading='loading'
            :data="tableData"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            style="width: 100%">
              <el-table-column
                prop="name"
                label="员工姓名">
              </el-table-column>
              <el-table-column
                prop="nickName"
                label="员工昵称">
              </el-table-column>
              <el-table-column
                label="头像">
                <template slot-scope="scope">
                  <lb-image  :src="scope.row.avatar" />
                </template>
              </el-table-column>
              <el-table-column
                label="支付码">
                  <template slot-scope="scope">
                    <lb-image  :src="scope.row.pay_qr" />
                  </template>
              </el-table-column>
              <el-table-column
                label="操作">
                  <template slot-scope="scope">
                    <div class="table-operate">
                      <lb-button type='primary' size='mini' plain @click="createSweepPaymentCode(scope.row.id,scope.$index)">生成支付码</lb-button>
                      <lb-button type='danger' size='mini' plain @click="downloadImg(scope.row.pay_qr,'支付码')">下载支付码</lb-button>
                    </div>
                  </template>
              </el-table-column>
          </el-table>
          <lb-page
          :batch='false'
          :page='searchForm.page'
          :pageSize='searchForm.limit'
          :total='total'
          @handleSizeChange='handleSizeChange'
          @handleCurrentChange='handleCurrentChange'
          >
        </lb-page>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      searchForm: {
        keyword: '',
        nikeName: '',
        page: 1,
        limit: 10
      },
      loading: false,
      total: 0,
      tableData: []
    }
  },
  created () {
    this.getTableDataList()
  },
  methods: {
    resetForm (name) {
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    getTableDataList (flag) {
      this.loading = true
      if (flag) this.searchForm.page = 1
      let {searchForm} = this
      this.$api.getSweepPaymentCodeList(searchForm).then(res => {
        console.log(res)
        this.loading = false
        if (res.code === 200) {
          this.total = res.data.total
          this.tableData = res.data.data
        }
      })
    },
    /**
     * @method 生成支付码
     */
    createSweepPaymentCode (id, index) {
      this.$api.createQRCode({staff_id: id}).then(res => {
        if (res.code === 200) {
          this.tableData[index].pay_qr = res.data.src
        }
      })
    },
    /**
      * @method 下载支付码
      */
    downloadSweepPaymentCode (id) {
      this.$api.downloadQRCode({id}).then(res => {
        if (res.code === 200) {

        }
      })
    },
    /**
     * @method 下载图片
     */
    downloadImg (imgsrc, name) {
      this.$api.handleImgSrc(imgsrc).then(res => {
        let image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let url = canvas.toDataURL() // 得到图片的base64编码数据

          let a = document.createElement('a') // 生成一个a元素
          let event = new MouseEvent('click') // 创建一个单击事件
          a.download = name || 'photo' // 设置图片名称
          a.href = url // 将生成的URL设置为a.href属性
          a.dispatchEvent(event) // 触发a的单击事件
        }
        image.src = res
      })
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .lb-app-sweepcode{
    width: 100%;
    .el-input{
      width: 200px;
    }
    .page-main{
      .el-table{
        img{
          width: 60px;
          height: 60px;
        }
      }
    }
  }
</style>
